/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-08 16:36:34
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-12 09:04:24
 */
import { NavBar, Toast, Popup, InfiniteScroll } from 'antd-mobile'
import Icon from '@/components/Icon/Icon'
import React from 'react'
import { CommentDetail } from '@/types/data'
import styles from './index.module.scss'
import CommentItem from '../CommentItem/CommentItem'
import NoComment from '../NoComment/NoComment'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getReplyList } from '@/store/actions/articleDetail'
import { RootState } from '@/types/store'
type Props = {
  // normal 普通 - 文章的评论
  // origin 回复评论的原始评论，也就是对哪个评论进行回复
  // reply 回复评论
  type?: 'normal' | 'reply' | 'origin'
  origin: CommentDetail
  onReply: (comment: CommentDetail) => void
  hideReply: () => void
}
const CommentReply = ({ hideReply, origin, onReply }: Props) => {
  console.log(origin, 77);
  const dispatch = useDispatch()
  // 获取评论回复数据列表
  useEffect(() => {
    dispatch(getReplyList(origin.com_id, ''))
  }, [])

  // 获取回复数据列表
  const { results } = useSelector((state: RootState) => state.articleDetail.reply)


  return <div className={styles.root}>
    <div className="reply-wrapper">
      {/* 顶部导航栏 */}
      <NavBar className="transparent-navbar" onBack={hideReply}>
        <div>{origin!.reply_count}条回复</div>
      </NavBar>

      {/* 原评论信息 */}
      <div className="origin-comment">
        <CommentItem onReply={onReply} comment={origin} type="reply"></CommentItem>
      </div>
      {/* 回复列表渲染 */}
      {/* 回复评论的列表 */}
      <div className="reply-list">
        <div className="reply-header">全部回复</div>
        {!results || results.length === 0 ? (
          <NoComment />
        ) : (
          results.map((item) => (
            <CommentItem
              key={item.com_id}
              comment={item}
              type="reply"
              onReply={onReply}
            ></CommentItem>
          ))
        )}
      </div>
      {/* footer */}
    </div>
  </div>
};
export default CommentReply